<template>
	<view class="container">
		<uni-table ref="table" :loading="loading" type="selection" @selection-change="selectionChange">
			<view class="empty" v-if="list.length < 1">
				<image class="image" src="@/static/img/empty.png" mode="aspectFit"></image>
			</view>
			<view v-else>
				<uni-tr>
					<uni-th>
						<view class="thBox">
							<text>全选</text>
							<view class="btnList">
								<text class="read" @click="readAll">批量已读</text>
								<text class="delete" @click="deleteAll">批量删除</text>
							</view>
						</view>
					</uni-th>
				</uni-tr>
				<uni-tr v-for="item in list" :key="item.id">
					<uni-td>
						<view class="tdBox" @click="goDetail(item.id)">
							<view class="badge" v-if="item.is_view == 0"></view>
							<view class="txt">[{{ item.message_title }}] {{ item.message_content }}</view>
							<view class="time">{{ item.send_time_format }}</view>
						</view>
					</uni-td>
				</uni-tr>
			</view>
		</uni-table>
		<uni-pagination v-if="total > FormData.perpage" :total="total" :pageSize="FormData.perpage" :value="FormData.page" @change="changePage" />
	</view>
</template>

<script>
import api from '@/api/api';
export default {
	data() {
		return {
			FormData: {
				page: 1,
				perpage: 10
			},
			total: 0,
			loading: false,
			list: [],
			selectIndex: []
		};
	},
	onShow() {
		this.getList();
	},
	onPullDownRefresh() {
		this.getList();
	},
	methods: {
		selectionChange(e) {
			this.selectIndex = e.detail.index;
		},
		readAll() {
			if (this.selectIndex.length < 1) {
				uni.showToast({
					title: '未选中数据',
					icon: 'none'
				});
			} else {
				const _this = this;
				const ids = _this.selectIndex.map((i) => _this.list[i].id).join();
				uni.showModal({
					title: '提示',
					content: '确认将选中项设置为已读？',
					success: function (res) {
						if (res.confirm) {
							api.msgView({ message_ids: ids }).then((res) => {
								if (res.data.is_success) {
									uni.showToast({
										title: '设置成功！',
										icon: 'success'
									});
									_this.getList();
									_this.$refs.table.clearSelection();
								}
							});
						}
					}
				});
			}
		},
		deleteAll() {
			if (this.selectIndex.length < 1) {
				uni.showToast({
					title: '未选中数据',
					icon: 'none'
				});
			} else {
				const _this = this;
				const ids = _this.selectIndex.map((i) => _this.list[i].id).join();
				uni.showModal({
					title: '提示',
					content: '确认删除选中项？',
					success: function (res) {
						if (res.confirm) {
							api.msgDelete({ message_ids: ids }).then((res) => {
								if (res.data.is_success) {
									uni.showToast({
										title: '删除成功！',
										icon: 'success'
									});
									_this.getList();
									_this.$refs.table.clearSelection();
								}
							});
						}
					}
				});
			}
		},
		goDetail(id) {
			uni.navigateTo({
				url: '/pages/mine/msg/detail?id=' + id
			});
		},
		changePage(e){
			this.FormData.page = e.current
			this.getList()
		},
		getList() {
			this.loading = true;
			api.msgList(this.FormData).then((data) => {
				this.list = data.data.items;
				this.total = data.data.total;
				this.loading = false;
				uni.stopPullDownRefresh();
			});
		}
	}
};
</script>

<style lang="scss">
.thBox {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.btnList {
		.delete {
			color: $uni-error;
		}
		.read {
			color: $uni-primary;
		}
		text {
			margin-left: 20rpx;
		}
	}
}
.tdBox {
	position: relative;
	.txt {
		width: calc(100vw - 120rpx);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 28rpx;
	}
	.time {
		font-size: 24rpx;
	}
	.badge{
		position: absolute;
		width: 12rpx;
		height: 12rpx;
		border-radius: 100%;
		top:0;
		left:-8rpx;
		background: #ff4d4d;
	}
}
</style>
